<script lang="ts" setup>
import { ref, reactive, defineEmits } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { message, Descriptions, Image } from 'ant-design-vue';
import { Page } from '@vben/common-ui';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getMaterialChangeLog } from '#/api/material';

const data = ref<any>({});

const [Modal, modalApi] = useVbenModal({
  class: 'w-3/5',
  onCancel() {
    modalApi.close();
  },
  onConfirm() {
    // message.info('onConfirm');
    // emit('fetch-data');
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = modalApi.getData<Record<string, any>>();
    }
  },
});

interface RowType {
  category: string;
  color: string;
  id: string;
  price: string;
  productName: string;
  releaseDate: string;
  temp_imgs: string[];
  template_images: string[];
}

const gridOptions: VxeGridProps<RowType> = {
  pagerConfig: {
    enabled: false,
  },
  cellStyle({ column }) {
    if (column.field === 'dead_line') {
      return {
        color: 'red',
      };
    }
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'created_time', title: '时间', width: 150 },
    { field: 'realname', title: '操作人', width: 100 },
    { field: 'color', title: '颜色', width: 100 },
    { field: 'action_num', title: '操作数量', width: 100 },
    { field: 'new_num', title: '新数量', width: 100 },
    { field: 'action_type', title: '操作类型', width: 100 },
    { field: 'warehouse_name', title: '所属仓库', width: 100 },
    { field: 'remark', title: '备注',  },


  ],
  exportConfig: {},
  height: '380px',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({}) => {
        const res = await getMaterialChangeLog({
          material_id: data.value.info.material_id,
        });
        return res.bom_list;
      },
    },
    sort: true,
  },
  showOverflow: false,
  sortConfig: {
    defaultSort: { field: 'category', order: 'desc' },
    remote: true,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
});
</script>

<template>
  <Modal title="变更记录">
    <Grid />
  </Modal>
</template>
